<template>
  <div class="note-publish">
    <div class="editor">
      <QuillEditor class="now" :options="options" v-model:content="state.content" contentType="html" />
    </div>
    <div class="note-wrap">
      <div class="note-cell">
        <van-field v-model="state.title" label="标题" placeholder="请输入笔记标题" />
      </div>
      <div class="note-cell">
        <van-field name="uploader" label="文件上传">
          <template #input>
            <van-uploader v-model="state.picture" multiple :after-read="afterRead" max-count="1" />
          </template>
        </van-field>

      </div>
      <div class="note-cell">
        <div class="sort" @click="state.sortShow = true">
          <span>选择分类 </span>
          <span>{{ state.note_type }}<van-icon name="arrow" /></span>
        </div>
        <van-action-sheet v-model:show="state.sortShow" :actions="state.actions" @select="onSelect" />
      </div>

    </div>
    <div class="btn"><van-button plain type="success" block @click="notePublish">发布笔记</van-button></div>

  </div>
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { reactive } from 'vue';
import axios from '@/api';
import { showSuccessToast } from 'vant';
import { useRouter } from 'vue-router'
const router = useRouter()
const options = {
  placeholder: "输入笔记内容"
}
const state = reactive({
  content: '',
  title: '',
  picture: [],
  sortShow: false,
  actions: [
    { name: '美食' },
    { name: '旅行' },
    { name: '汽车' },
    { name: '时尚' },
    { name: '科技' }
  ],
  note_type: '美食'
})
const afterRead = () => {
  // console.log(state.picture);
}
const onSelect = (item) => {

  state.sortShow = false;
  state.note_type = item.name
};
const notePublish = async () => {
  const file = state.picture[0]; // 假设你只上传了一个文件
  console.log(file.file);
  const chunkSize = 2 * 1024 * 1024; // 2MB
  const totalChunks = Math.ceil(file.file.size / chunkSize);
  // console.log(totalChunks);
  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, file.file.size);
    const chunk = file.file.slice(start, end);
    const uploadChunk = async (chunk, chunkNumber, totalChunks) => {
      const formData = new FormData();
      formData.append('chunk', chunk);
      formData.append('chunkNumber', chunkNumber);
      formData.append('totalChunks', totalChunks);

      // 使用 Axios 或其他库发送 POST 请求上传文件切片
      console.log(formData);
    };
    uploadChunk(chunk, i, totalChunks);
  }



  // const userId = JSON.parse(sessionStorage.getItem('userInfo')).id
  // const nickname = JSON.parse(sessionStorage.getItem('userInfo')).nickname
  // const res = await axios.post('/note/publish',{
  //   title:state.title,
  //   note_type:state.note_type,
  //   head_img:state.picture[0].content,
  //   note_content:state.content,
  //   userId:userId,
  //   nickname:nickname

  // })
  // if(res.code === '80000'){
  //   showSuccessToast(res.msg);
  //   setTimeout(()=>{
  //     router.push('/noteClass')
  //   },1500)
  // }
}
</script>

<style lang="less" scoped>
.note-publish {
  min-height: 100vh;
  position: relative;

  .note-wrap {
    margin-top: 20px;

    .note-cell {
      border-bottom: 1px solid #d1d5db;

      .sort {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        line-height: 3;
        padding: 10px 16px;
        color: #323233;
      }
    }
  }

  .btn {
    width: 80%;
    margin: 0 auto;
    margin-top: 1.5rem;
    position: sticky;
    bottom: 10px;
  }
}
</style>
<style>
.ql-container.ql-snow {
  height: 200px;
}
</style>